﻿{% extends "gma/base.html" %}
{% load static %}
{% load mytag %}

{% block extra_css %}
<link href="{% static 'css/morris.css' %}" rel="stylesheet">
{% endblock extra_css %}

<!-- CONTENT
  =====================================================================-->

{% block content %}

<div class="page__hd">
    <h1 class="page__title">
        <i class="fa fa-archive weui_grid_icon_fa" style="font-size: 32px;"> </i> 统计数据
    </h1>
    <p class="page__desc"> {{ data_title }} </p>
</div>

<div class="page__bd">
    <div class="weui-cells__title"> 趋势图 </div>
    <div id="dnu-line-chart"></div>

    <div class="weui-cells__title"> 详细数据 </div>
    <a class="weui-cells">
        {% for date, value, unit in data %}
        <a class="weui-cell weui-cell_access" href="{% url 'gma:channel_daily_brief' channel date|date:"Y-m-d" %}">
            <div class="weui-cell__bd"> <p> <i class="fa fa-calendar-alt"></i>  {{ date|date:"Y-m-d" }} </p> </div>
            <div class="weui-cell__ft"> {{ value }} {{ unit }}</div>
        </a>
        {% endfor %}
    </div>
</div>

<div class="page__ft">
    <a href="{% url 'gma:home' %}">
        <span class="bottom-logo">
           HiBao
       </span>
    </a>
</div>

{% endblock content %}


<!-- SCRIPT
  =====================================================================-->

{% block extra_js %}

<script src="{% static 'js/raphael-2.1.0.min.js' %}"></script>
<script src="{% static 'js/morris.min.js' %}"></script>

<script>
$(document).ready(function() {
    Morris.Line({
        element: 'dnu-line-chart',
            data: [
                {% for date, value, unit in data %}
                { date: "{{ date|date:"Y-m-d" }}", value: {{ value }} },
                {% endfor %}
            ],
        xkey: 'date',
        ykeys: ['value'],
        resize: true,
        lineWidth:4,
        labels: ['{{ data_label }}'],
        lineColors: ['#3CC51F'],
        pointSize:5,
    });
});
</script>

{% endblock extra_js %}